<script setup>
import { ref, onMounted } from 'vue'
import loginApi from '@/api/login_api.js'

const adminName = ref('管理员')

onMounted(async () => {
  try {
    const res = await loginApi.logininfo()
    adminName.value = res.realName || '管理员'
  } catch (error) {
    console.error(error)
  }
})
</script>

<template>
  <div class="home-container">
    <div class="welcome-card fade-in">
      <div class="icon-circle">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="white" viewBox="0 0 24 24">
          <path d="M12 12c2.21 0 4-1.79 4-4S14.21 4 12 4 8 5.79 8 8s1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
        </svg>
      </div>
      <h1>欢迎回来，{{ adminName }}！</h1>
      <p>祝你管理顺利</p>

      <!-- 邮我按钮 -->
      <div class="mailme">
        <a target="_blank"
           href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=SHFxen99f39wfwg5OWYrJyU"
           class="mail-btn">
          <img src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_12.png" alt="邮我">
          <span>联系我</span>
        </a>
      </div>
    </div>
  </div>
</template>

<style scoped>
.home-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
}

.welcome-card {
  background: linear-gradient(145deg, #ff7f9e, #ffd04b);
  color: white;
  padding: 60px 100px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 15px 30px rgba(0,0,0,0.2), inset 0 -5px 10px rgba(255,255,255,0.2);
  position: relative;
  overflow: hidden;
}

.welcome-card h1 {
  font-size: 36px;
  margin: 15px 0;
}

.welcome-card p {
  font-size: 20px;
  opacity: 0.9;
}

.icon-circle {
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 邮我按钮 */
.mailme {
  margin-top: 30px;
}

.mail-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;  /* 左右多留点空间 */
  border-radius: 25px;
  background: rgba(255,255,255,0.25);
  color: white;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);

  /* 关键部分 */
  white-space: nowrap;   /*  强制文字不换行 */
  min-width: 120px;      /*  保证按钮最小宽度 */
  justify-content: center; /* 居中内容 */
}


.mail-btn:hover {
  background: rgba(255,255,255,0.4);
  transform: translateY(-2px);
}

.fade-in {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}
</style>
